<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>comment</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <!-- <script src="../public/javascripts/xheditor/jquery/jquery-1.11.2.min.js" charset="utf-8"></script> -->
    <script src="../public/javascripts/xheditor/xheditor-1.2.2.min.js" charset="utf-8"></script>
    <script src="../public/javascripts/xheditor/xheditor_lang/zh-cn.js" charset="utf-8"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <script src="../public/jquery.serializejson.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    
</head>

<body>
    <table id="dg"></table>
    <div id="dlg" class="easyui-dialog" title="Basic Dialog" style="width:600px;height:400px;padding:10px" data-options="closed:true">
        <!-- 表单 -->
        <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
            <!-- id -->
            <div style="display: none">
                <input class="easyui-textbox" name="_id" style="width:100%">
            </div>
            <!-- cateId -->
            <div style="display: none">
                <input class="easyui-textbox" name="cateId" style="width:100%">
            </div>
            <!-- content -->
            <div style="margin-bottom:20px">
                <textarea  name="content" id="content2" cols="30" rows="10" style="border-radius:5px" data-options="label:'content:',required:true"></textarea>
            </div>
            <!-- 提交按钮 -->
            <div style="text-align:center;padding:5px 0">
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submit()" style="width:80px">Submit</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
            </div>
    </div>
</body>

<script>
    $(pageInit);

    function pageInit() {
        $('#content2').xheditor({
            html5Upload: false,
            upMultiple: '1',

            upLinkUrl: "upload.php",
            upLinkExt: "zip,rar,txt",

            upImgUrl: "/uploadImg",
            upImgExt: "jpg,jpeg,gif,png",

            upFlashUrl: "upload.php",
            upFlashExt: "swf",

            upMediaUrl: "upload.php",
            upMediaExt: "wmv,avi,wma,mp3,mid"
        });
    }


    if ($.cookie('cateId')) {
        $('#dg').datagrid({
            url: 'http://localhost:3000/comment/list',
            pagination: 'true',
            fit: true,
            queryParams: {
                cateId: $.cookie('cateId')
            },
            toolbar: [{
                text: 'Add',
                iconCls: 'icon-add',
                handler: function () {
                    // console.log(cid);
                    $('#ff').form('load', {
                        cateId: $.cookie('cateId')
                    });
                    $('#dlg').dialog('open');
                }
            }, {
                text: 'Cut',
                iconCls: 'icon-cut',
                handler: function () {
                    $.messager.confirm('提醒', 'Are you confirm this?', function (r) {
                        if (r) {
                            removes();
                        }
                    });

                }
            }, {
                text: '搜索',
                iconCls: 'icon-search',
                handler: function () {
                    $('#dlg2').dialog('open');
                }
            }],
            columns: [
                [{
                        field: 'ck',
                        checkbox: true
                    },

                    {
                        field: 'date',
                        title: 'date',
                        width: 200
                    },
                    {
                        field: 'content',
                        title: 'content',
                        width: 400
                    },
                    {
                        field: '_id',
                        title: '操作',
                        formatter: function (val, row, index) {
                            return `<a href="javascript:;" onclick="formShow('${val}');">修改</a> <a href="javascript:;" onclick="delData('${val}');">删除</a>`;
                        }
                    },
                    {
                        field: 'cateId',
                        hidden: true
                    },
                ]
            ]
        });
    }
    // 表单提交
    function submit() {
        $('#ff').form('submit', {
            onSubmit: function () {
                var formData = $('#ff').serializeJSON();
                // console.log(formData);
                if (formData._id) {
                    console.log($('#ff').serializeJSON()._id);
                    $.ajax({
                        type: 'put',
                        url: `http://localhost:3000/comment/${formData._id}`,
                        data: formData,
                    }).done(res => {
                        $('#dg').datagrid('reload'); //表格数据刷新
                    })
                    $('#dlg').dialog('close'); //关闭对话框
                    $('#dlg').form('clear');
                } else {
                    delete formData._id;
                    if ($(this).form('enableValidation').form('validate')) {
                        $.ajax({
                            type: 'post',
                            url: 'http://localhost:3000/comment',
                            data: formData,
                        }).done(res => {
                            $('#dg').datagrid('reload'); //表格数据刷新
                        })
                        $('#dlg').dialog('close'); //关闭对话框
                        $('#dlg').form('clear');
                    } else {
                        console.log('aaa');
                    }
                }
            }

        });

    }

    //修改
    function formShow(id) {
        $.ajax({
            type: 'get',
            url: `http://localhost:3000/comment/${id}`
        }).done(res => {
            $('#dlg').dialog('open');
            $('#ff').form('load', res);
        })

    }
    //清空
    function clearForm() {
        $('#dlg').form('clear');
    }
    //删除
    function delData(val) {
        $.messager.confirm('提醒', 'Are you confirm this?', function (r) {
            if (r) {
                $.ajax({
                    type: 'delete',
                    url: `http://localhost:3000/comment/${val}`
                }).done(function () {
                    $('#dg').datagrid('reload'); //表格数据刷新
                });
            }
        });

    }
    // 批量删除
    function removes() {
        var datas = $('#dg').datagrid('getSelections');
        var ids = [];
        for (var i = 0; i < datas.length; i++) {
            ids.push(datas[i]._id);
        }
        $.ajax({
            url: 'http://localhost:3000/comment/removes',
            type: 'post',
            data: {
                ids: ids.toString()
            }
        }).done(function () {
            $('#dg').datagrid('reload'); //表格数据刷新
        })
    }
</script>

</html>